<template>
  <div class="category-first-page xtx-wrapper">
    <div class="container">
      <!-- 面包屑 -->
      <xtx-bread><template slot="default">{{category.name}}</template></xtx-bread>
      <!-- 轮播图 -->
      <home-banner></home-banner>
      <!-- 全部分类 -->
      <div class="xtx-all-cate">
        <h3>全部分类</h3>
        <ul>
          <li v-for="item in allSubCategoryAndGoods" :key="item.id">
            <a href="javascript:;" @click="scrollTo(`#goods_${item.id}`)">
              <img :src="item.picture" alt />
              <p>{{item.name}}</p>
            </a>
          </li>
        </ul>
      </div>
      <!-- 分类明细 -->
      <div class="xtx-one-cate" v-for="item in allSubCategoryAndGoods" :key="item.id" :id="`goods_${item.id}`">
        <h3>－{{item.name}}－</h3>
        <router-link class="more" :to="`/category/sub/${item.id}`">
        查看更多 <i class="iconfont icon-angle-right"></i>
        </router-link>
        <p>温暖柔软，品质之选</p>
        <ul>
          <li v-for="product in item.goods" :key="product.id">
            <router-link :to="`/product/${product.id}`">
              <img :src="product.picture" alt="">
              <p class="name ellipsis">{{product.name}}</p>
              <p class="desc">{{product.tag||'品质优选'}}</p>
              <p class="price">¥{{product.price}}</p>
            </router-link >
          </li>
        </ul>
      </div>
      <!-- 相关专题 -->
      <div class="xtx-special">
        <h3>相关专题</h3>
        <ul>
          <li v-for="i in 6" :key="i">
            <a href="./special.html">
              <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/index-new-pd01.png" alt="">
              <div class="info">
                <p class="name">5个给春天的生活新提案</p>
                <p class="desc">餐厨起居洗护好物</p>
                <span class="price">¥399起</span>
              </div>
              <div class="comment">
                <div class="line"></div>
                <div class="num">
                  <span class="fr">共 <i class="red">100</i> 件商品</span>
                  <span class="iconfont icon-xiaoxi"></span> <span class="mr18">1000+</span>
                  <span class="iconfont icon-xin2 red"></span> <span class="red">98%</span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import HomeBanner from '../home/components/home-banner'
export default {
  name: 'category-first-page',
  components: { HomeBanner },
  data () {
    return {
      category: {},
      allSubCategoryAndGoods: []
    }
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getCategory()
  },
  created () {
    this.getCategory()
  },
  methods: {
    getCategory () {
      this.$http.get(`category?id=${this.$route.params.id}`).then((res) => {
        const { id, name, children } = res.data.result
        this.category = { id, name }
        this.allSubCategoryAndGoods = children
      })
    },
    scrollTo (seletor) {
      const offsetTop = document.querySelector(seletor).offsetTop
      document.documentElement.scrollTop = offsetTop
    }
  }
}
</script>

<style scoped lang='less'>
@import './styles/index.less';
</style>
